<div id="app" style="background-color: #f6f8fa">
  <div class="p2 flex">
    <a href="javascript:history.go(-1)" class="weui-btn weui-btn_mini weui-btn_default"> 返回 </a>
    <div style="flex: 1"></div>
  </div>

  <div>
    <div class="weui-cells__title">兑换记录</div>

    <div class="weui-form-preview bg-white mt2" v-for="pointOrder in pointOrders">
      <div class="weui-form-preview__hd">
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">商品</label>
          <em class="weui-form-preview__value">{{pointOrder.item.name}}</em>
        </div>
      </div>

      <div class="weui-form-preview__bd">
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">兑换积分</label>
          <span class="weui-form-preview__value">{{pointOrder.point}}积分</span>
        </div>
        <div class="weui-form-preview__item">
          <label class="weui-form-preview__label">兑换时间</label>
          <span class="weui-form-preview__value">{{pointOrder.time}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="pointOrder.item.type=='code'">
          <label class="weui-form-preview__label">兑换码</label>
          <span class="weui-form-preview__value">{{pointOrder.item.code}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="pointOrder.type=='real'">
          <label class="weui-form-preview__label">领取方式</label>
          <span class="weui-form-preview__value"
            >{{{'post' : '邮寄快递', 'qrcode': '联系客服'}[pointOrder.item.getway] }}</span
          >
        </div>

        <div class="weui-form-preview__item" v-if="pointOrder.checked">
          <label class="weui-form-preview__label">核销时间</label>
          <span class="weui-form-preview__value">{{pointOrder.checkTime| datetime}}</span>
        </div>
        <div class="weui-form-preview__item" v-if="pointOrder.addressInfo">
          <label class="weui-form-preview__label">邮寄地址</label>
          <span class="weui-form-preview__value"
            >{{pointOrder.addressInfo.address + ' ' + pointOrder.addressInfo.name + ' ' +
            pointOrder.addressInfo.phone}}</span
          >
        </div>
      </div>

      <div class="weui-form-preview__ft">
        <a
          class="weui-form-preview__btn weui-form-preview__btn_primary"
          v-if="pointOrder.item.type=='real' && pointOrder.item.getway=='qrcode'"
          href="javascript:"
          @click="openOrderQr(pointOrder)"
          >联系客服</a
        >

        <a
          class="weui-form-preview__btn weui-form-preview__btn_primary"
          v-if="pointOrder.item.type=='code'"
          href="javascript:"
          @click="openOrderQr(pointOrder)"
          >兑换</a
        >

        <a
          class="weui-form-preview__btn weui-form-preview__btn_primary"
          v-if="pointOrder.item.type=='real'  && pointOrder.item.getway=='post'"
          @click="openAddress(pointOrder)"
          href="javascript:"
          >{{pointOrder.addressInfo? '修改地址' : '填写地址'}}</a
        >
        <a
          v-if="(pointOrder.item.type=='daodian' || pointOrder.item.type=='code' || pointOrder.item.getway=='qrcode') && !pointOrder.checked"
          @click="checkOrder(pointOrder)"
          class="weui-form-preview__btn weui-form-preview__btn_primary"
          href="javascript:"
          >手动核销</a
        >
      </div>
    </div>

    <div v-if="pointOrders.length==0" class="gray my2 center">
      <img src="/img/empty.png" style="width: 150px" />
      <div class="font-12 bold">没有更多数据了</div>
    </div>
  </div>

  <div class="p2 font-12 gray center">到底了~</div>

  <div v-show="showQrcode">
    <div class="weui-mask" @click="showQrcode=false"></div>
    <div class="weui-half-screen-dialog">
      <div v-if="selectedOrder">
        <div class="p1 center">{{selectedOrder.item.name}}</div>
        <div class="p1 m1 center">{{selectedOrder.item.real_desc}}</div>
        <div class="p1 m1 center">{{selectedOrder.item.code_desc}}</div>
        <div class="p1 m1 center bg-green white" v-if="selectedOrder.item.code">{{selectedOrder.item.code}}</div>
        <div class="center m1 p1"><img v-bind:src="selectedOrder.item.qrcode" style="width: 180px" /></div>
      </div>
    </div>
  </div>

  <div v-show="showPost">
    <div class="weui-mask" @click="showPost=false"></div>
    <div class="weui-half-screen-dialog">
      <div class="weui-half-screen-dialog__hd">
        <div class="weui-half-screen-dialog__hd__side">
          <button class="weui-icon-btn" @click="showPost=false">
            <i class="weui-icon-back-arrow-thin"></i>
          </button>
        </div>
      </div>
      <div class="weui-half-screen-dialog__bd">
        <div class="weui-cells">
          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">姓名</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" v-model="addressInfo.name" placeholder="请输入姓名" />
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">电话</label>
            </div>
            <div class="weui-cell__bd">
              <input class="weui-input" v-model="addressInfo.phone" placeholder="请输入电话" />
            </div>
          </div>

          <div class="weui-cell">
            <div class="weui-cell__hd">
              <label class="weui-label">地址</label>
            </div>
            <div class="weui-cell__bd">
              <textarea class="weui-textarea" v-model="addressInfo.address" placeholder="请输入地址"></textarea>
            </div>
          </div>
        </div>
        <div class="gray center font-13">请确保手机信息正确, 否则无法正常领取</div>
      </div>
      <div class="weui-half-screen-dialog__ft">
        <button @click="submitAddress" class="weui-btn weui-btn_primary">提交地址信息</button>
      </div>
    </div>
  </div>
</div>

<script>
  new Vue({
    el: "#app",
    data: {
      showQrcode: false,
      showPost: false,
      selectedOrder: null,
      addressInfo: {},
      pointOrders: [],
    },
    created: function () {
      this.getPointOrders();
    },
    filters: {
      datetime: function (time) {
        return dayjs(time).format("YYYY-MM-DD HH:mm:ss");
      },
    },
    methods: {
      getPointOrders: function () {
        let that = this;
        axios.get("/user/client/<%=clientid%>/pointOrders").then(function (res) {
          that.pointOrders = res.data.pointOrders;
        });
      },
      openOrderQr: function (order) {
        this.selectedOrder = order;
        this.showQrcode = true;
      },
      openAddress: function (order) {
        this.selectedOrder = order;
        if (this.selectedOrder.addressInfo) {
          this.addressInfo = this.selectedOrder.addressInfo;
        }
        this.showPost = true;
      },
      checkOrder: function (order) {
        let that = this;
        if (confirm("核销后无法再次核销, 请联系相关人员确认是否手动核销")) {
          axios
            .post("/user/client/<%=clientid%>/checkorder", {
              orderid: order._id,
            })
            .then(function (res) {
              if (!res.data.status) {
                weui.topTips(res.data.msg);
              } else {
                weui.toast("核销成功");
                that.getPointOrders();
              }
            });
        }
      },
      submitAddress: function () {
        let order = this.selectedOrder;
        let addressInfo = this.addressInfo;
        let that = this;
        axios
          .post("/user/client/<%=clientid%>/submitaddress", { orderid: order._id, addressInfo: addressInfo })
          .then(function (res) {
            that.getPointOrders();
            that.showPost = false;
            weui.toast("提交成功");
          });
      },
    },
  });
</script>
